<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import * as Cesium from 'cesium';
import {onMounted} from "vue";

onMounted(async () => {
  const customImageryProvider = new Cesium.ArcGisMapServerImageryProvider({
    url: '//services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer'
  })
  const viewer = new Cesium.Viewer('cesiumContainer', {
    // 禁用小部件
    baseLayerPicker: false,
    animation: false,
    // 设置影像提供器
    // imageryProvider: customImageryProvider,
    // 设置地形提供器
    terrainProvider: await Cesium.createWorldTerrainAsync({
      requestWaterMask: true,
      requestVertexNormals: true
    })
  });

  // viewer.camera.setView({
  //   destination: Cesium.Cartesian3.fromDegrees(113.318, 23.114155, 200),
  //   // 方向、俯视或仰视
  //   orientation: {
  //     heading: Cesium.Math.toRadians(90),
  //     // pitch: Cesium.Math.toRadians(45)
  //   }
  // })

  viewer.camera.setView({
    destination: new Cesium.Cartesian3(1332761, -4662399, 4137888),
    // 方向、俯视或仰视
    orientation: {
      heading: 0.60,
      pitch: -0.66
      // pitch: Cesium.Math.toRadians(45)
    }
  })

  // 添加3D模型到图元
  const NewYorkCityTileset = viewer.scene.primitives.add(
      await Cesium.Cesium3DTileset.fromIonAssetId(75343)
  );

  // 定义3D瓦片的样式
  NewYorkCityTileset.style = new Cesium.Cesium3DTileStyle({
    color: {
      // 条件判断设置颜色
      conditions: [
        ['${Height} >= 100', 'color("purple", 0.5)'],
        ['${Height} >= 50', 'color("red")'],
        ['true', 'color("blue")']
      ],
      show: '${Height} > 0',
    }
  });

  // Cesium划分城市区域并且着色
  const neightborHoodsPromise = Cesium.GeoJsonDataSource.load('')

  var neighborhoods;
  neightborHoodsPromise.then((dataSource) => {
    // 将数据添加到查看器
    viewer.dataSources.add(dataSource);
    neighborhoods = dataSource.entities;
    var neighborhoodsEntities = dataSource.entities.values;
    for (let i = 0; i < neighborhoodsEntities.length; i++) {
      let entity = neighborhoodsEntities[i];
      if (Cesium.defined(entity.polygon)) {
        entity.name = entity.properties?.neightborhood
        entity.polygon.material = Cesium.Color.fromRandom({
          red: 0.1,
          maximumGreen: 0.5,
          minimumBlue: 0.5,
          alpha: 0.6,
        })

        entity.polygon.classificationType = Cesium.classificationType.TERRAIN;

        let polyPosition = entity.polygon.hierarchy.getValue(Cesium.JulianDate.now()).position;
        let polyCenter = Cesium.BoundingSphere.fromPoints(polyPosition).center;
        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeocentricSurface(polyCenter);
        entity.position = polyCenter

        // 生成标签
        entity.label = {
          text: entity.name,
          showBackground: true,
          scale: 0.6,
          horizontalOrigin: Cesium.horizontalOrigin.CENTER,
          verticalOrigin: Cesium.verticalOrigin.BOTTOM,
          distanceDisplayCondition: new Cesium.distancesDisplayCondition(10, 8000),
          disableDepthTestDistance: 100,
        }
      }
    }
  })

  // Cesium地图标记显示和实现
  // KML文件是Google创建的一种地标性文件
  // 用于记录某一个地点、或连续地点的时间、经纬度、海拔等地理信息数据、供GE等有关软件使用
  const geocachePromise = Cesium.KmlDataSource.load('./assets/SampleData/sampleGeocacheLocations.kml', null);

  // 将geocache广告牌实体添加到场景中并为其设置样式
  geocachePromise.then((dataSource) => {
    // 将新数据作为实体添加到查看器中
    viewer.dataSources.add(dataSource);

    // 获取实体数组
    const geocacheEntities = dataSource.entities.values;

    for(let i = 0; i < geocacheEntities.length; i++) {
      const entity = geocacheEntities[i]
      if(Cesium.defined(entity.billboard)) {
        // 调整垂直原点，使图钉位于地形上
        entity.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
        entity.billboard.image = '/assets/tagpark.png'
        // 禁用标签以减少混乱
        entity.label = undefined;
        // 添加距离显示条件

      }
    }
  })

})


</script>

<style>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>
